<template>
  <div class="material-list-container">
    <!-- 顶部导航栏 -->
    <el-row type="flex" justify="start" class="header-toolbar">
      <el-col :span="2">
        <el-button type="primary" @click="handleSave">保存</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="success" @click="handleSaveAndAdd">保存且新增</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="warning">数据暂存</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="info">草稿箱</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary">导入</el-button>
      </el-col>
      <el-col :span="5" style="margin-left: 300px;">
        <el-button type="primary">设计</el-button>
      </el-col>
    </el-row>

    <!-- 基本信息 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">基本信息</div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="物料清单主题：">
            <el-input v-model="form.materialListTheme"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="物料清单编号：">
            <el-input v-model="form.materialListNo" placeholder="保存后自动生成"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="制单人员：">
            <el-input v-model="form.creator" value="admin" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注：">
        <el-input type="textarea" v-model="form.remark"></el-input>
      </el-form-item>
    </el-card>

    <!-- 父件信息 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">父件信息</div>
      </template>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="产品名称：">
            <el-input v-model="parent.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品编码：">
            <el-input v-model="parent.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="规格型号：">
            <el-input v-model="parent.model"></el-input>
          </el-form-item>
        </el-col>
        <!-- 其他父件信息字段... -->
      </el-row>
    </el-card>

    <!-- 子件信息表格 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">子件信息</div>
      </template>
      <el-table :data="childItems" style="width: 100%">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="name" label="产品名称"></el-table-column>
        <el-table-column prop="code" label="产品编号"></el-table-column>
        <el-table-column prop="model" label="规格型号"></el-table-column>
        <el-table-column prop="ratio" label="产品比例"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="copyRow(scope.$index)">复制行</el-button>
            <el-button type="danger" @click="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button @click="addChildItem">新增子件</el-button>
    </el-card>

    <!-- 附件部分 -->
    <el-card class="box-card" shadow="never">
      <template #header>
        <div class="card-header">附件</div>
      </template>
      <el-upload
        action="#"
        list-type="text"
        :file-list="attachments">
        <el-button type="primary">批量上传</el-button>
      </el-upload>
      <el-table :data="attachments" style="width: 100%">
        <el-table-column prop="name" label="文件名称"></el-table-column>
        <el-table-column prop="size" label="文件大小"></el-table-column>
        <el-table-column prop="uploader" label="上传人"></el-table-column>
        <el-table-column prop="time" label="上传时间"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  materialListTheme: '',
  materialListNo: '',
  creator: 'admin',
  remark: ''
});

const parent = ref({
  name: '',
  code: '',
  model: ''
});

const childItems = ref([
  {
    name: '',
    code: '',
    model: '',
    ratio: '',
    quantity: '',
    role: '',
    process: '',
    lossRate: '',
    materialWay: ''
  }
]);

const attachments = ref([]);

const handleSave = () => {
  // 保存逻辑
  console.log('保存数据:', { form, parent, childItems, attachments });
};

const handleSaveAndAdd = () => {
  handleSave();
  // 新增逻辑
};

const addChildItem = () => {
  childItems.value.push({
    name: '',
    code: '',
    model: '',
    ratio: '',
    quantity: '',
    role: '',
    process: '',
    lossRate: '',
    materialWay: ''
  });
};

const copyRow = (index) => {
  const item = { ...childItems.value[index] };
  childItems.value.splice(index + 1, 0, item);
};

const deleteRow = (index) => {
  childItems.value.splice(index, 1);
};
</script>

<style scoped>
.material-list-container {
  padding: 20px;
}

.header-toolbar .el-col {
  margin-bottom: 10px;
}

.box-card {
  margin-bottom: 20px;
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}
</style>